import React, { CSSProperties, FC, ReactElement , InputHTMLAttributes, ChangeEvent, useReducer } from "react";
import classNames from 'classnames';

type sizeType = "lg" | "sm";


export interface inputProps extends Omit<InputHTMLAttributes<HTMLElement> , 'size'>  {
    disabled?: boolean;
    size?: sizeType;
    prepand?: string | ReactElement;
    append?: string | ReactElement;
    className?: string;
    style?: CSSProperties;
    onChange? : (e: ChangeEvent<HTMLInputElement>) => void;
};

const Input: FC<inputProps> = (props) => {
    const {
        disabled,
        size,
        prepand,
        append,
        className,
        style,
        ...restProps
    } = props;


    let cls = classNames('input', className, {
        'is-size':size,
    });

    //空处理
    const fixControlledValue = (value : any) => {
        if ( typeof value === 'undefined' || value ===null ) {
            return '';
        }
        return value;
    }

    if ( 'value' in props ) {
        delete restProps.defaultValue;
        restProps.value = fixControlledValue(restProps.value);
    }


    return <div className={cls} style={style}>
        {prepand?<div className="llzs-input-group-prepend">{prepand}</div>:''}
        <input disabled={disabled} {...restProps}/>
        {append?<div className="llzs-input-group-append">{append}</div>:''}
    </div>;
}

export default Input;